<template>
  <div class="user-detail-container">
    <button class="back-btn" @click="goBack">后退</button>
    <h4 style="margin-top: 20px; color: #333;">用户{{ id }}的详情页面</h4>
    <!-- 可根据需求扩展详情内容 -->
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

// 接收路由参数
const props = defineProps({
  id: String
})

const router = useRouter()

// 后退功能
const goBack = () => {
  router.back()
}
</script>

<style scoped lang="less">
.user-detail-container {
  width: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.back-btn {
  padding: 8px 16px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;

  &:hover {
    background: #eee;
  }
}
</style>